<template>
	<view class="">
		<view class="navbar" :style="{background:`rgb(255 255 255 / ${isScrollTop}%)`}">
			<!-- 顶部操作 -->
			
				<!-- #ifdef MP-WEIXIN -->
				<view class="navbarH" :class="isScrollTop>0.5?'border-b':''" :style="'height:' + navH + 'rpx;'">
				<view class=" acea-row row-middle row-right navbarCon"
					:style="{ paddingTop: homeTop +'rpx', paddingRight: navbarRight + 'px' }">
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<view class="navbarH" :class="isScrollTop>0.5?'border-b':''" :style="'height: 20rpx;'">
				<view class=" acea-row row-middle row-right navbarCon"
					:style="{ paddingTop: '25rpx', paddingRight:  '30rpx' }">
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="navbarH" :class="isScrollTop>0.5?'border-b':''" :style="'height: 20rpx;'">
				<view class=" acea-row row-middle row-right navbarCon"
					:style="{ paddingTop: '25rpx', paddingRight:  '30rpx' }">
				<!-- #endif -->
					<view class="navbar-img" v-if="isLove" @click="toCollect">
						<image src="../../static/images/red_start.png" mode=""></image>
					</view>
					<view class="navbar-img" v-else @click="toCollect">
						<image src="../../static/images/black_start.png" mode="" v-if="isScrollTop>0.5"></image>
						<image src="../../static/images/white_start.png" mode="" v-else></image>
					</view>
					<view class="navbar-img" @click="toPage('/pages/others/mapFinding/mapFinding?location='+JSON.stringify(location))">
						<image src="../../static/images/black_location.png" mode="" v-if="isScrollTop>0.5"></image>
						<image src="../../static/images/white_location.png" mode="" v-else></image>
					</view>
					<!-- #ifndef MP -->
					<view class="navbar-img">
						<image src="../../static/images/black_share.png" mode="" v-if="isScrollTop>0.5"></image>
						<image src="../../static/images/white_share.png" mode="" v-else></image>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<!-- 菜单 -->
			<view class="longTab" v-if="menu.length&&isScrollTop>0.5">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
					:scroll-left="tabLeft" show-scrollbar="true">
					<view class="longItem" :style='"width:"+isWidth+"px"' :data-index="index"
						:class="index===tabClick?'click':''" v-for="(item,index) in menu" :key="index" :id="'id'+index"
						@click="longClick(index)">{{item.name}}</view>
					<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
						<view class="underline"></view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 返回键 -->
		<!-- #ifndef MP-TOUTIAO  -->
		<view id="home" class="home acea-row row-center-wrapper iconfont icon-xiangzuo" :class="isScrollTop>0.5?'on':''"
			:style="{ top: homeTop +'rpx' }" v-if="returnShow" @tap="returns">
			<!-- <view class="line" v-if="returnShow"></view>
				<navigator url="/pages/index/index" class="iconfont icon-shouye4"></navigator> -->
		</view>
		<!-- #endif -->

	</view>
</template>

<script>
	import {
		toPage
	} from '@/filters/commFilter.js'
	export default {
		name: 'detailNavbar',
		props: {
			title: {
				type: String,
				default: ''
			},
			scrollTop: {
				type: Number,
				default: 100
			},
			isLove: {
				type: Boolean,
				default: false
			},
			menu: {
				type: Array,
				default: () => {
					return []
				}
			},
			location:{
				type:Object,
				default: ()=>{
					return{
						latitude: 0,
						longitude: 0
					}
				}
			}
		},
		data() {
			return {
				returnShow: true, //是否展示返回按钮
				navH: '',
				navbarRight: 0,
				homeTop: 20,
				tabClick: 0, //导航栏被点击
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0
			}
		},
		computed: {
			isScrollTop() {
				return this.scrollTop > 100 ? 100 : this.scrollTop / 1
			}
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 5
				}
			})
			// setTimeout(()=>{
			// 	this.longClick(this.tabNavOn)
			// },800)
		},
		mounted() {
			let that = this;
			var pages = getCurrentPages();
			// 判断有没有上个页面
			if (pages.length >= 2) {
				// 显示返回按钮
				this.returnShow = true
			}
			// that.returnShow = pages.length === 1 ? false : true;
			// #ifdef MP
			that.navH = getApp().globalData.navHeight;
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
			// #endif
			// #ifndef MP
			that.navH = 96;
			// #endif
			uni.getSystemInfo({
				success: function(res) {
					// that.height = res.windowHeight;
					//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
					// #ifndef APP-PLUS || H5 || MP-ALIPAY
					that.navbarRight = res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
					// #endif
				}
			});
		},
		methods: {
			toPage,
			// 导航栏点击
			longClick(index) {
				if (this.menu.length > 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.tabClick = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				let obj = {
					type: 'big', //大标题
					index: index
				}
				this.parentEmit(obj)
				// this.$parent.currentTab = index //设置swiper的第几页
			},
			parentEmit(data) {
				this.$emit('changeTab', data);
			},
			// 后退
			returns() {
				uni.navigateBack();
			},
			toCollect() {
				this.$emit('collect', !this.isLove);
			},
			toLocation() {
				console.log(this.$location)
				let that = this;
				uni.openLocation({
					latitude: that.$location.latitude,
					longitude: that.$location.longitude,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
	}

	.navbarH.border-b {
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}

	.navbarCon {
		height: 100%;
	}

	.navbar-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 24rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.home {
		color: #fff;
		position: fixed;
		width: 56rpx;
		height: 56rpx;
		z-index: 99;
		left: 33rpx;
		background: rgba(190, 190, 190, 0.5);
		border-radius: 50%;
		font-size: 33rpx;

		&.on {
			background: unset;
			color: rgba(36, 36, 36, 1);
		}
	}

	.home .line {
		width: 1rpx;
		height: 24rpx;
		background: rgba(255, 255, 255, 0.25);
	}

	.home .icon-xiangzuo {
		font-size: 28rpx;
	}

	.longTab {
		width: 100%;
		/* #ifdef H5 */
		padding-bottom: 20rpx;
		/* #endif */
		/* #ifdef MP */
		padding-top: 12rpx;
		padding-bottom: 12rpx;

		/* #endif */
		.longItem {
			height: 50upx;
			display: inline-block;
			line-height: 50upx;
			text-align: center;
			font-size: 32rpx;

			&.click {
				// font-weight: bold;
				color: rgba(238, 33, 45, 1);
			}
		}

		.underlineBox {
			height: 3px;
			width: 20%;
			display: flex;
			align-content: center;
			justify-content: center;
			transition: .5s;

			.underline {
				width: 33rpx;
				height: 4rpx;
				background-color: rgba(238, 33, 45, 1);
			}
		}
	}
</style>